<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>div布局中的居中处理</title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}
			
			#main {
				width: 100%;
				height: 600px;
				background-color: #F5F2E8;
			}
			
			.rowStyle {
				width: 100%;
				height: 30px;
				background-color: red;
				margin-top: 5px;
			}
			
			#col1 {
				width: 33%;
				height: 100%;
				background-color: blue;
				/*居中处理**/
				margin: 0px auto;
			}
			
			#col2 {
				width: 45%;
				height: 100%;
				background-color: blue;
				/*居中处理**/
				/*相对于父容器右移50%*/
				position: relative;
				left: 50%;
				top: 0%;
				/*使用css3的transform属性将该元素向左移动自身的50%*/
				transform:translate(-50%,0);
			}
		</style>
	</head>

	<body>
		<div id="main">
			<div id="row1" class="rowStyle">
				<div id="col1"></div>
			</div>
			<div id="row2" class="rowStyle">
				<div id="col2"></div>
			</div>
		</div>

	</body>

</html>